<template>
	<div class="main">
		<!--顶部分类开始-->
		<div class="nav">
			<ul>
				<li><a @click="changeStatus(0)" href="javascript:;" :class="statusFlag==0?'nav_active':''">全部</a></li>
				<li><a @click="changeStatus(1)" href="javascript:;" :class="statusFlag==1?'nav_active':''">进行中</a></li>
				<li><a @click="changeStatus(2)" href="javascript:;" :class="statusFlag==2?'nav_active':''">待评价</a></li>
				<li><a @click="changeStatus(3)" href="javascript:;" :class="statusFlag==3?'nav_active':''">已完成</a></li>
			</ul>
		</div>
		<!--顶部分类结束-->	
		<!--工单列表开始-->
		<div class="consult">
			<ul>
				<li v-for="(item,index) in consultLawyerList" :key="item.id">
					<div class="consult_top">
						<div class="consult_top_content">
							<div class="useravatar">
								<img v-if="item.useravatar" :src="item.useravatar">
								<img v-else src="@/assets/images/wechat/lawyer/consultlawyerlist/user.png">
							</div>
							<p>咨询单号：{{item.id}}</p>
						</div>
					</div>
					<div class="consult_middle">
						<ul>
							<li>
								<div>咨询类型</div>
								<div>{{item.consultTypeName}}</div>
							</li>
							<li>
								<div>受理律师</div>
								<div>{{item.lawyerName}}</div>
							</li>
							<li>
								<div>结束时间</div>
								<div v-if="item.endTime">{{item.endTime}}</div>
								<div v-else>暂未结束</div>
							</li>
						</ul>
					</div>
					<div class="consult_bottom">
						<div>{{ item.createTime }}</div>
						<router-link v-if="item.status==1" class="consult_status_now" :to="{path:'chatroom',query: {id: item.id}}" >进行中</router-link>
						<router-link v-else-if="item.status==2" class="consult_status_wait" :to="{path:'chatroom',query: {id: item.id}}">待评价</router-link>
						<router-link v-else class="consult_status_finish" :to="{path:'chatroom',query: {id: item.id}}">已完成</router-link>
					</div>
				</li>
			</ul>
		</div>
		<!--工单列表结束-->
	</div>
</template>

<script>
//引入js	
import {studentSelectConsultLawyer} from '@/api/consultlawyer'
import {formatDate} from '@/filters/formatdate'

export default {
	components: {
	},
    data(){
		return {
			statusFlag:0,
			consultLawyerList:[],
			pageData:{
				pageNo:1,
				pageSize:20,
				total:0
			}
		}
    },
    created:function(){
		this.selectConsultLawyer()
  	},
  	beforeMount: function() {
		
    },
  	mounted: function () {
  		
  	},
  	methods:{
		selectConsultLawyer:async function(){
			var ajaxData={}
			ajaxData.pageNo=this.pageData.pageNo
			ajaxData.pageSize=this.pageData.pageSize
			if(this.statusFlag>0){
				ajaxData.status=this.statusFlag
			}
			
			var resultData = await studentSelectConsultLawyer(ajaxData)
			if(resultData.code==200){
			   this.consultLawyerList=resultData.data.consultLawyerFindResVoList
			   this.consultLawyerList.forEach(item =>{
					item.createTime=formatDate(item.createTime)
					item.endTime=formatDate(item.endTime)
			   })
			}
		},
  		changeStatus:function(statusFlag){
			this.statusFlag = statusFlag
			this.consultLawyerList=[]
			this.selectConsultLawyer()
		}
  	}
}
</script>

<style lang="scss" scoped>
.main{ width:100%;
height: 100vh;
overflow:auto;  position: relative;background:#f5f4f6;}
.nav{ width:100%;}
.nav>ul{ width:100%; overflow:hidden; display:flex; background:#FFF}
.nav>ul>li{ width:25%;}
.nav>ul>li>a{ width:80%; margin:auto; display:block; text-align:center; line-height:48px; color:#595959; border-bottom:2px solid #fff;}
.nav_active{ color:#e21d1f !important;border-bottom:2px solid #e21d1f !important}
.consult{ width:100%;}
.consult>ul{ width:96%; margin:auto;}
.consult>ul>li{ width:100%; background:#FFF; margin-top:10px; border-radius:4px;}
.consult_top{ width:100%; border-bottom:1px solid #f5f4f6; overflow:hidden}
.consult_top_content{ width:92%; margin:auto; overflow:hidden; margin-top:10px; margin-bottom:10px;}
.consult_top_content>.useravatar{ width:30px; height:30px; overflow:hidden; border-radius:50%; float:left;}
.useravatar>img{ width:100%;}
.consult_top_content>p{ float:left; line-height:30px;color:#595959; margin-left:10px;}
.consult_middle{ width:100%;}
.consult_middle>ul{ width:92%; margin:auto; padding:10px 0px; border-bottom:1px solid #f5f4f6}
.consult_middle>ul>li{ width:100%; overflow:hidden;}
.consult_middle>ul>li>div{ line-height:24px;}
.consult_middle>ul>li>div:nth-child(1){ width:30%; float:left; color:#7e7e7e}
.consult_middle>ul>li>div:nth-child(2){ width:70%; float:right; text-align:right;color:#595959;}
.consult_bottom{ width:92%; margin:auto; overflow:hidden}
.consult_bottom>div{ float:left; font-size:12px; line-height:50px; color:#b4b4b4}
.consult_bottom>a{ float:right; display:block; line-height:24px; padding:0px 10px;  margin-top:12px; border-radius:13px;}
.consult_status_now{border:1px solid #fff5e7;  color:#ed9a42;}
.consult_status_wait{border:1px solid #e9f8ff; color:#8ddbff;}
.consult_status_finish{border:1px solid #8ecebf;color:#12c07f;}

</style>
